<template>
  <div class="gouwuche" >
    <!-- 购物车图片 -->
    <div class="xiang_ys container animated lightSpeedIn" v-show="shop_flag!=0">
      <p class="xx_xy">
        <img src="../../public/img/spec1_01.jpg" alt="" />
        <span>购物车</span>
      </p>

      <div class="xx_xx">
        <img src="../../public/img/spec1_02.jpg" alt="" />
        <span>填写和提交订单信息</span>
      </div>
      <div class="xx_xx">
        <img src="../../public/img/spec1_03.jpg" alt="" />
        <span>成功提交订单</span>
      </div>
    </div>

   <div class="hiden" v-show="shop_flag==0">
       <img src="../../public/img/cartempty.png" alt="">
       <p>您还没有选购商品， <router-link to="/shop">
                  去逛逛
                </router-link></p>
   </div>


    <!-- 我的购物车 -->
    <div class="container zong_ji" v-show="shop_flag!=0">
      <div><h4>我的购物车:</h4></div>
    </div>
    <div class="container" v-show="shop_flag!=0">
      <div class="row">
        <table
          class="taba"
          id="myList"
          border="1"
          width="980px"
          cellspacing="0"
          style="margin:auto;text-align:center"
        >
          <thead>
            <td class="">操作</td>
            <td class="">商品</td>

            <td class="">单价</td>
            <td class="">数量</td>
            <td class="">小计</td>
            <td class="">😔</td>
          </thead>
          <tbody v-for="(val, index) in arr_obj" :key="index">
            <tr>
              <td><input type="checkbox"  v-model="val.stat"  @change="check_d($event)"/></td>
              <td class="font_le"><img :src="val.img" alt=""  /> {{ val.name }}</td>
              <td>￥{{ val.price }}</td>
              <td>
                <form action="">
                  <input
                    type="number"
                    name="number"
                    min="1"
                    max="45"
                    step="1"
                    v-model="val.snum"
                    oninput="value=value.replace(/[^\d]|^[0]/g,'')"
                    @change="change_i(index)"
                  />
                </form>
              </td>
              <td>￥{{ val.price*val.snum }}</td>
              <td class=""><button @click="del(index)">删除</button></td>
            </tr>
          </tbody>

          <tfoot>
            <tr>
              <td><input type="checkbox" v-model="check_e" v-on:click="check_l($event)" /></td>
              <td></td>
              <td></td>
              <td class="fon_sz">总计金额（不含运费）：</td>
              <td class="fon_sz">￥{{ $store.getters.getCount.total }}</td>
              <td class=""><button @click="clear_tr()">删除选中</button></td>
            </tr>
          </tfoot>
        </table>
      </div>
    </div>
    <div class="container">
      <div class="col-md-8"></div>
      <button type="button" class="btn btn-danger btn_ji" v-show="shop_flag!=0"   data-toggle="modal"
        data-target="#exampleModal" @click="btn_mg" >下单结算</button>
      <button
        class="btn btn-danger btn_ji"
        data-toggle="modal"
        data-target="#exampleModal1"
        v-show="shop_flag!=0"
      >
        填写地址
      </button>
    </div>


    <!-- Modal -->
    <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel"><span>请输入地址：</span>  <v-distpicker province="广东省" city="广州市" area="海珠区"></v-distpicker></h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span @click="delete_a" aria-hidden="true">&times;</span>
        </button>
      </div>
       <div class="modal-body modal_font">
         <div v-for="(val, index) in arr_mg" :key="index">
                   <img :src="val.img" class="img_small" alt=""  />
                   <span class="price_shop">{{val.name}}</span>
                   <span class="price_shop">￥ {{val.price}}</span>
                   <span class="price_shop">x {{val.snum}}</span>
         </div>



       </div>
      <div class="modal-body">
        
       </div>
      <div class="modal-footer">
         <span class="all_price">您一共需要支付：{{all_shop}}元</span>
        <button type="button" class="btn btn-secondary" data-dismiss="modal" @click="buy_pa">确认</button>
      </div>
    </div>
  </div>
</div>
<div class="modal fade" id="exampleModal1" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">请输入详细地址:</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <div>
        <v-distpicker province="广东省" city="广州市" area="海珠区"></v-distpicker>
        </div>
       </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal" @click="where_d">确认</button>
      </div>
    </div>
  </div>
</div>
    <hr class="h_ra" />
  </div>
</template> 
<style lang="less">
.fon_sz{
  font-size: 24px;
}
.hiden{
    margin: auto;
    text-align: center;
    color: #845941;
    font-size: 20px;
}
.xiang_ys {
  margin-top: 40px;
  display: flex;
  justify-content: space-around;
}
.xiang_ys p span {
  display: block;
  font-size: 20px;
  margin: -45px 6px -10px 120px;
  color: #845941;
}
.xx_xx span {
  color: #eee;
  font-size: 20px;
}
.zong_ji h4 {
  margin: 35px 0 10px 45px;
  color: #a58b7c;
}
.taba {
  border: 2px solid #eee;
  font-size: 12px;
  color: #845941;
}
.taba thead {
  line-height: 50px;
  text-align: center;
  background-color: #f7f7f7;
}
.taba thead td {
  color: #bd957d;
  font-size: 16px;
}
.taba tr td img {
  width: 50px;
  height: 50px;
}
.taba tr td form input {
  width: 170px;
  height: 30px;
  border: 1px solid rgb(207, 201, 201);
  outline: none;
}
.btn_ji {
  float: right;
  background-color: #bd957d;
  border: 1px solid #644e40;
  margin: 10px 10px 0px 10px;
  font-size: 16px;
  outline: none;
}
.h_ra {
  margin-top: 4rem;
}
tbody tr td button {
  border: 0px solid;
  outline: none;
  background-color: #bd957d;
  color: #fff;
}
tfoot tr td button {
  border: 0px solid;
  outline: none;
  background-color: #bd957d;
  color: #fff;
}
tfoot {
  height: 180px;
}
.font_le{
 display: flex;
 justify-content: start;
 align-items: center;
 border-top:0px;
  border-left:0px;
}
.footer_xx {
  margin-top: 80px;
  text-align: center;
   background-color: #855648;
}
.img_small{
  width: 150px;
  height: 150px;
}
.modal_font{
  font-size: 20px;
  margin-top: 10px;
}
.all_price{
  font-size: 20px;
  margin-right: 240px;
}
.price_shop{
  margin-left: 30px;
}

</style>
<script>
import VDistpicker from 'v-distpicker'
export default {
  components:{ VDistpicker },
  data() {
    return {
      arr_obj: 0,
     check_e:false,
     shop_flag:0,
     payAdd:[],
     arr_mg:0,
     all_shop:0,
     str:""
    };
  },
  methods: {
    change_i(index) {
      this.arr_obj[index].snum=parseInt(this.arr_obj[index].snum)
      console.log(this.arr_obj[index].name);
        this.$axios.post('http://47.114.130.21:3001/add','shop_id='+String(localStorage.getItem("key"))+'&name='+this.arr_obj[index].name+'&snum='+this.arr_obj[index].snum)
        .then((data) =>{
       // console.log(data);
      })
    },
    //全选框
   check_l(ev){
      console.log(this.arr_obj.length);
      for (var i = 0; i < this.arr_obj.length; i++) {      
        this.arr_obj[i].stat=ev.target.checked		
        }
  
    },
    //单选框
    check_d(e){
   //   console.log(e.target.checked);
      var arr_m=[]
       for (var i = 0; i < this.arr_obj.length; i++) {      
      //  console.log(this.arr_obj[i].stat);
			  arr_m.push(this.arr_obj[i].stat)
        }
         
   if ( arr_m.some( num =>num == false) ) {
     //console.log(123);
         this.check_e=false
    }else {
      this.check_e=true
    }  
    },
    //删除选中  
    clear_tr() {
				//不允许在循环中根据下标删除数组元素
				//循环遍历将未读的装进一个新数组中，再将新数组替换旧数组
        //遍历 找到stat为false的装到一个数组中，再接回去
      
        var obj = [];
        //console.log(this.arr_obj.length);
				for (var i = 0; i < this.arr_obj.length; i++) {
					if (this.arr_obj[i].stat == false) {
            obj.push(this.arr_obj[i]);//新数组装false的数据       
					}else{
            this.shop_flag--
            this.arr_obj[i].stat=false
          }
        }
       this.$store.state.arr=obj
				//新数组替换旧数组
        this.arr_obj = obj;
       if(this.arr_obj==0){
        this. shop_flag=0
       }
      },
      del(index){   
        	for (var i = 0; i < this.arr_obj.length; i++) {
          //  console.log(this.arr_obj[i]);
            if(this.arr_obj[index].name==this.arr_obj[i].name&&this.arr_obj[index].stat==true){         
              //    console.log(1);
                   this.$axios.post('http://47.114.130.21:3001/delete','shop_id='+String(localStorage.getItem("key"))+'&name='+this.arr_obj[index].name)
        .then((data) =>{
       // console.log(data);
      })
                   this.arr_obj.splice(index, 1); //删除
               
                  // this.arr_obj.splice(index, 1); //删除
                  //  this.shop_flag--
                  if(this.arr_obj.length==0){
                    this. shop_flag=0
                  }
            }else if(this.arr_obj[index].name==this.arr_obj[i].name&&this.arr_obj[index].stat==false){
                alert("请先选中再删除")
            }
            
          }      
      },
      selected(data){ 
    this.province = data.province.value
    this.city = data.city.value  
       },
       where_d(){
         this.payAdd=[]
         for(var i=0;i<$(".distpicker-address-wrapper select").length;i++){
            this.payAdd.push($(".distpicker-address-wrapper select").eq(i).val());
        };
       },
       btn_mg(){
          var obj1 = [];
				for (var i = 0; i < this.arr_obj.length; i++) {
					if (this.arr_obj[i].stat == true) {
            this.all_shop+=this.arr_obj[i].price*this.arr_obj[i].snum
            obj1.push(this.arr_obj[i]);//新数组装false的数据       
					}
        }
      this.arr_mg=obj1

       },
       delete_a(){
         this.all_shop=0
       },
       buy_pa(){
         var arr=[]
         arr = localStorage.getItem(localStorage['username'] + 1) ? localStorage.getItem(localStorage['username'] + 1) : [];
         if (arr.length != 0) {
            arr = JSON.parse(arr);
        }   
        for(var i=0;i<this.arr_mg.length;i++){
            arr.push(this.arr_mg[i])
            this.$axios.post('http://47.114.130.21:3001/pay','shop_id='+String(localStorage.getItem("key"))+'&name='+this.arr_mg[i].name)
        .then((data) =>{
       // console.log(data);
       alert("购买成功")
       this.$router.go(0);
      })  
        }       
         this.str =JSON.stringify(arr);
         localStorage.setItem(localStorage.getItem("username")+1, this.str)
         this.all_shop=0
       }
      

  },
  mounted() {
    //console.log(this.$store.state.arr);
    //this.arr_obj = this.$store.state.arr;
    this.shop_flag=this.$store.getters.getCount.num--
    this.$axios.post('http://47.114.130.21:3001/shoppi','shop_id='+String(localStorage.getItem("key")))
     .then((data) =>{
        console.log(data);
        if(data.data.code =="200"){
          //console.log(data.data.sdata[1].price);
        for(var i=0;i<data.data.sdata.length;i++){
         data.data.sdata[i].price= parseInt(data.data.sdata[i].price)
         data.data.sdata[i].stat=Boolean(!data.data.sdata[i].stat)
        }  
          this.$store.state.arr=data.data.sdata  
          this.arr_obj=this.$store.state.arr 
           if(data.data.sdata.length==0) {
           this.shop_flag=0
       }   
        }else if(data.data.code=="404"){
          alert(data.data.msg)
        }
      })
      
  }
  
 
};
</script>